<template>
  <basic-container>
    <div style="width:100%;min-height: 30px;padding-left:5px;display: inline-block;">
      <el-container>
        <el-aside width="150px">
          <el-button type="primary" @click="handlePrint">打印</el-button>
        </el-aside>
      </el-container>
    </div>
    <template>
      <div id="printDetail">
        <br/>
        <div class="pull-auto"  style="text-align: left;font-size: 16px;color:#3478f5">
          <div class="block">
            产品类型： {{productLineType}}<i class="el-breadcrumb__separator el-icon-arrow-right"></i>工艺模板名称：{{craftLineName}}
            <i class="el-breadcrumb__separator el-icon-arrow-right"></i>流程图号：{{flowChartNo}}
          </div>
        </div>
        <br/>
        <el-container style="border: #e0e0e0 solid 1px;">
          <el-main class="demo">
            <avue-flow :height="800"
                       width="100%"
                       ref="flow"
                       :option="option"
                       v-model="flowForm">
              <template #header="{node}" >
                {{(node || {}).name}}
              </template>
              <template slot-scope="{node}">
                <span style="height: 40px;line-height: 40px;">{{(node || {}).name}}</span>
              </template>
            </avue-flow>

          </el-main>
        </el-container>
      </div>
    </template>
  </basic-container>
</template>

<script>
import {getObj} from '@/api/pfoc/craftproduct'

export default {
  name: "craft",
  props:{
    craftId:{
      type:String
    },
    productLineTypeList:{//产线类型集合
      type:Array
    }
  },
  data() {
    return {
      count: 0,
      nodeCount:0,//节点下标
      form: [],//提交时数据集合
      flowForm:'',
      articleNumber:null,//品号
      craftLineName:null,//工艺产线名称
      craftLineMainData:{},//工艺产线主变数据
      tableLoading: false,
      productLineType:null,//产线类型
      flowChartNo:null,//流程图号
      option: {
        name: null,
        nodeList: [],//工序节点集合
        lineList: [],//工序各节点指向顺序集合
      }
    };
  },
  created() {
  },
  computed: {
    nodeList () {
      return this.option.nodeList
    }
  },
  mounted() {
  },
  methods: {
    getCraftProduct(){
      if(!this.validatenull(this.craftId)) {
        this.tableLoading = true
        getObj(this.craftId).then(response => {
          this.$refs.flow.resetPlumb();
          this.$nextTick(function () {
            //获取工艺产线主表数据
            this.craftLineMainData = response.data.data;//工艺产线主变数据
            //获取工艺产线子表数据
            this.articleNumber = this.craftLineMainData.articleNumber;//品号
            this.craftLineName = this.craftLineMainData.craftLineName;//工艺产线名称
            this.productLineType = this.craftLineMainData.productLineType;//产线类型
            this.flowChartNo = this.craftLineMainData.flowChartNo;//流程图号
            //设置反显工序
            this.option.nodeList = JSON.parse(this.craftLineMainData.processNodes);
            //设置反显工序指向顺序
            this.option.lineList =  JSON.parse(this.craftLineMainData.processNodeLine);
            //初始化节点下标
            var n = this.option.nodeList[this.option.nodeList.length - 1].id;
            this.nodeCount = parseInt(n.split("node")[1]) + 1;
            //重新初始化flow组件
            this.$refs.flow.init();
            this.$refs.flow.cleanupDarg();
            this.tableLoading = false
          })
        }).catch(() => {
          this.tableLoading = false
        })
      }
    },
    //打印
    handlePrint () {
      this.$Print('#printDetail');
    },
  }
};
</script>

<style scoped>
/deep/.avue-flow__node{
  height: auto!important;
}
/deep/ .avue-flow__node-header {
  line-height: 30px;
}
/deep/.el-descriptions__title {
  font-size: 14px;
  font-weight: 400;
  margin-top: 5px;
}

/*以下样式是打印的时候avue表格错乱修正方式（主要是序号列和操作列固定影响的）*/
/deep/.el-table__fixed{
  display: none!important;
}
/deep/.el-table__fixed-right{
  display: none!important;
}
/deep/.el-table__cell.is-hidden>*{visibility:visible !important;}

/deep/ .avue-grid{
  display: none!important;
}
/deep/.el-main{
  background:#fff !important;
}
/deep/.el-card__body{
  padding: 0px!important;
}
/*去掉滚动条样式*/
.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
